<template>
	<view class="container">
    <view style="height: 10rpx;"></view>
    
		<view  class="item" v-for="(item,index) in dataList" @click="itemInfo(item)">
		  <view class="title">{{item.address}}</view>
		  <view style="height: 10rpx;"></view>
		  <view class="xztv-row item-row">
		    <view class="left">姓名</view>
		    <view class="right">
		      {{item.name}}
		    </view>
		  </view>
		  <view class="xztv-row item-row">
		    <view class="left">手机号码</view>
		    <view class="right">
		      {{item.mobile}}
		    </view>
		  </view>
		</view>
		<view v-if="dataList.length==0" style="height: 500rpx;">
			<empty ></empty>
		</view>
		
		
		<view class="add-btn zaozao-flex-center"  @click="add" >
			<text>添加访客</text>
		</view>
		
	</view>
</template>

<script>
	import {getVisitorList} from "@/api/user.js";
	export default {
		data() {
			return {
				addStatus:true,
				dataList:[]
			}
		},
		onLoad() {
			
		},
		onShow(){
			uni.showLoading({
				title: '加载中'
			});
			this.getList()
		},
		methods: {
			getList(){
        getVisitorList().then((res)=>{
          if(res.data.code==0){
            this.dataList=res.data.data.list;
            this.addStatus=res.data.data.addStatus
          }else{
            uni.showModal({
            	title: '提示',
            	content: res.data.msg,
              showCancel:false,
            	success: function (res) {
            		if (res.confirm) {
            			uni.navigateBack();
            		} 
            	}
            });
          }
        })
				uni.hideLoading();
			},
			
			add(){
				uni.navigateTo({
					url:`/pages/owner/visitor/add`
				})
			},
			
		}
	}
</script>

<style scoped lang="less">
  .container{
    position: relative;
  	background: #F6F7F7;
    .item{
      position: relative;
      width: 698rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
      margin:20rpx auto;
      padding: 40rpx 38rpx;
      box-sizing: border-box;
      .status-btn{
        width: 135rpx;
        height: 55rpx;
        border-radius: 0rpx 20rpx 0rpx 20rpx;
        position: absolute;
        right:0;
        top:0;
      }
      .status-wait{
        background: rgba(228, 139, 4, 0.14);
        color: rgba(228, 139, 4, 1);
      }
      .status-pass{
        background: rgba(19, 159, 0, 0.14);
        color: rgba(19, 159, 0, 1);
      }
      .status-refuse{
        background:rgba(0, 0, 0, 0.09);
        color:rgba(0, 0, 0, 0.34);
      }
      .title{
        font-weight: 600;
        font-size: 32rpx;
        color: #000000;
        line-height: 42rpx;
        margin-bottom: 10rpx;
      }
      .item-row{
        margin-top:14rpx;
        .left{
          width: 170rpx;
          font-weight: 400;
          font-size: 28rpx;
          color: rgba(0,0,0,0.4);
        }
        .right{
          flex: 1;
          font-weight: 400;
          font-size: 28rpx;
          color: #000000;
          line-height: 33rpx;
        }
        .map_icon{
          width:60rpx;
          height: 60rpx;
        }
      }
    }
  }
	.xztv-row {
		display: flex;
		flex-direction: row;
	}
	.xztv-row-between {
		justify-content: space-between;
	}
	.container{
	  width:750rpx;
	  
	}
	.add-btn{
		width: 702rpx;
		height: 80rpx;
		background: #40C7B8;
		border-radius: 156rpx;
		opacity: 1;
		margin-left:24rpx;
		color:white;
		
	}
</style>